<template>
	<view class="content">
		<scroll-view class="itembox" scroll-y="true">
			<view v-for="(item, index) in lists" :key="index">
				<view class="completion">{{ item.question_type }}</view>
				<view class="long-line"></view>
				<view class="title-flex">
					<image class="title-bg blue" src="../../static/image/summary-blue.png"></image>
					<view class="first-title">第{{ item.index }}题</view>
				</view>
				<!-- <view :class="{ active_favorite: item.is_check }" class="favorite">
					<i :class="[item.is_check?'iconpingjiaxingxing':'iconpingjiaxingxing-xian']" class="iconfont" @tap="check_favorite(index, item.question_id)"></i>
					<text>收藏</text>
				</view> -->
				<view class="long-line2"></view>
				<view class="first-title-content"><rich-text :nodes="item.question_title"></rich-text></view>
				<view class="title-flex">
					<image class="title-bg orange" src="../../static/image/summary-orange.png"></image>
					<view class="first-title">答案</view>
				</view>
				<view class="container-flex-row first-title-content answer1">
					<view class="answer">您的答案：</view>
					<view v-if="item.myanswer==''">未答题</view>
					<view v-else>{{item.myanswer}}</view>
				</view>
				<view class="container-flex-row answer2">
					<view class="answer">正确答案：</view>
					<view>{{item.answer}}</view>
				</view>
				<view class="title-flex">
					<image class="title-bg red" src="../../static/image/summary-red.png"></image>
					<view class="first-title">解析</view>
				</view>
				<view class="first-title-content analysis">
					{{ item.analyze }}
					<rich-text :nodes="item.question_analysis"></rich-text>
				</view>
				<view class="title-flex">
					<image class="title-bg lanse" src="../../static/image/summary-lanse.png"></image>
					<view class="first-title">知识点</view>
				</view>
				<view class="container-flex-row first-title-content knowledge">
					<view class="container-flex-row know1">
						<view>章节：</view>
						<view>第{{ item.knowsid }}章</view>
					</view>
					<view class="container-flex-row know2">
						<view>小节名：</view>
						<view>{{ item.knows }}</view>
					</view>
				</view>

				<view class="grey-bg"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import util from '../../common/util.js';
	export default {
		data() {
			return {
				lists: [],
				selftest_log_id: '',
				student_id: ''
			}
		},
		onLoad(e) {
			this.selftest_log_id = e.selftest_log_id;
			this.student_id = e.student_id;
			if(e.selftest_log_id == null){
				var data = uni.getStorageSync('summary-task-all');
				this.getList(data);
			} else {
				var data = {
					selftest_log_id:this.selftest_log_id,
					student_id: this.student_id,
					is_get_answer: 2,
					is_out_html: 2
				}
				this.$zapi.apiPost('user/selftest.users/SelfTestAnalysis', data).then(res => {
					if(res.data.code == 200){
						var data = res.data.data;
						this.getList(data);
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				});
			}	
		},
		methods: {
			/* 获取全部解析 */
			getList(data){
				var questionList = data.question_lists;
				for (let i = 0; i < questionList.length; i++) {
					questionList[i].interest_lists_log = questionList[i].exam_answer_log;
					util.latex_reques(questionList,'question_title');//解析 试题标题 latex 公式转换
					util.latex_reques(questionList,'question_analysis');//解析 试题解析 latex 公式转换
					util.latex_answer(questionList,'answer_list');//解析答案选项 latex 公式转换
				}
				this.lists = util.getAnalysis(questionList);
				for (let j = 0; j < this.lists.length; j++) {
					this.lists[j].is_check = false;
					this.lists[j].question_type = util.getTypeName(this.lists[j].question_typeid);
				}
				this.$forceUpdate();
			},
			/* 收藏与取消收藏 */
			check_favorite(index, question_id) {
				this.lists[index].is_check = !this.lists[index].is_check;
				if (this.lists[index].is_check) {
					// 发起收藏请求
					var d={'question_id':question_id};
					this.$zapi.apiPost('user/Collection.users/CollectionAdd', d).then(res => {
						uni.showToast({
							title:'收藏成功'
						});
					});
				} else {
					// 发起取消收藏请求
					var d={'question_id':question_id};
					this.$zapi.apiPost('user/Collection.users/CollectionDetele', d).then(res => {
						uni.showToast({
							title:'取消收藏'
						});
					});
				}
				this.$forceUpdate();
			}
		}
	}
</script>

<style lang="stylus">
	.img {
		display: block;
		max-width: 90%;
		margin: 0upx;
		
	}
	.img_base {
		display: block;
		max-height: 100px;
		height: 50px;
		padding: 0upx;
		/* margin: 0 auto; */
		/* margin-top: -20upx;
		margin-left: -45upx; */
	}
html {
	font-size: 26upx;
}

.content {
	position: absolute;
	width: 100%;
	height: 100%;
}

.itembox {
	height: calc(100% - 0upx);
}

.completion {
	width: 750upx;
	height: 72upx;
	line-height: 72upx;
	text-align: center;
	color: #00adff;
	font-size: 32upx;
}

.long-line {
	width: 750upx;
	border-top: 1upx solid #e5e5e5;
}

.long-line2 {
	width: 710upx;
	border-top: 1upx solid #e5e5e5;
	margin: 10upx auto;
}

.title-flex {
	width: 750upx;
	height: 52upx;
	display: flex;
	justify-content: flex-start;
	margin-top: 20upx;
}

.title-bg {
	width: 142upx;
	height: 52upx;
}

.first-title {
	color: #ffffff;
	z-index: 99;
	margin-left: -112upx;
}

.small-title {
	font-size: 24upx;
	margin-top: 2upx;
}

.blue {
	box-shadow: -0.1rem 0.1rem 0.2rem rgba(0, 173, 255, 0.4);
}

.orange {
	box-shadow: -0.1rem 0.1rem 0.2rem rgba(255, 144, 0, 0.4);
}

.red {
	box-shadow: -0.1rem 0.1rem 0.2rem rgba(241, 0, 0, 0.4);
}

.lanse {
	box-shadow: -0.1rem 0.1rem 0.2rem rgba(0, 92, 220, 0.4);
}

.favorite {
	color: #666666;
	margin-left: 645upx;
	margin-top: -50upx;
	display: flex;
	flex-direction: column;
	text-align: center;
}

.favorite i {
	font-size: 45upx;
	line-height: 45upx;
}

/**
	 *点击收藏样式开始
	 */
.active_favorite {
	color: #00adff;

	display: flex;
	flex-direction: column;
	text-align: center;
}

.active_favorite i {
	font-size: 48upx;
	line-height: 45upx;
}

/**
	 */
.square {
	font-size: 22upx;
	width: 32upx;
	height: 32upx;
	line-height: 32upx;
	border-radius: 6upx;
	color: #ffffff;
	text-align: center;
	margin-left: 20upx;
	margin-right: 12upx;
}

.red-square {
	background: #f10000;
}

.green_square {
	background: #00d555;
}
.red_square {
	background: red;
}

.container-flex-row {
	display: flex;
	flex-direction: row;
}
.container-flex-row1 {
	display: flex;
	flex-direction: row;
	margin-left: 30upx;
}

.item1 {
	color: #666666;
	align-items: center;
	margin-bottom: 10upx;
}

.first-title-content {
	font-size: 30upx;
	color: #333333;
	margin-top: 14upx;
	margin-left: 25upx;
}

.answer1 {
	color: #666666;
}

.answer2 {
	color: #00d555;
	margin-left: 25upx;
}

.answer{
	width: 190upx;
}

.analysis {
	color: #b0b0b0;
}

.knowledge {
	color: #666666;
	margin-bottom: 10upx;
}

.know2 {
	margin-left: 52upx;
}

.grey-bg {
	border-bottom: 20px solid #e5e5e5;
}

.dati-item {
	margin-left: 20upx;
}
</style>
